<template>
	<div>
		<el-dialog title="菜品列表" :visible.sync="FoodVisible"  width="90%" center>
		<el-row :gutter="20">
			<el-col :span="6" style="height: 52.75rem;overflow: auto;">
				<el-card shadow="never" style="">
          <el-input @focus="getFoodListByShortCode" placeholder="菜品助词码(大写)" prefix-icon="el-icon-search" v-model="shortCode"></el-input>
          <br />
          <el-card v-if="EnglishKeyBordVisle"><EnglishKeyBord @getLetter="getLett"></EnglishKeyBord></el-card>
				</el-card>
				<br />
				<el-card shadow="never" style="">
					<el-table :data="selectFoodList" style="width: 100%;" height="300px" @row-click="superRequirement" highlight-current-row="true">
						<el-table-column prop="foodName" label="品名">
							<template slot-scope="scope">
								<div>
									<el-tag v-show="scope.row.giveFoodStatus === 1" type="danger">赠</el-tag>
									{{ scope.row.foodName }}
								</div>
								<div style="color: forestgreen;font-size: 0.5rem;">{{ scope.row.requirementName }}</div>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="数量">
							<template slot-scope="scope">
								<i class="el-icon-remove-outline cursor" @click="removeFood(scope.row)"></i>
								&nbsp;&nbsp;{{ scope.row.foodNum }}&nbsp;&nbsp;
								<i class="el-icon-circle-plus-outline cursor" @click="addFood(scope.row)"></i>
							</template>
						</el-table-column>
						<el-table-column prop="price" label="金额">
							<template slot-scope="scope">
								<div style="color: red;">￥{{ Number(scope.row.total) }}元</div>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
				<br />
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="12">
							<a @click="jiezhang">
								<el-card class="cursor" shadow="always" style="text-align: center;background-color: #F08080;color: #F5F5F5;font-weight: 800;">
									保存:{{ totalMoney }}
								</el-card>
							</a>
						</el-col>
						<el-col :span="12">
							<a @click="clearSelectFood"><el-card class="cursor" shadow="always" style="text-align: center;">清空</el-card></a>
						</el-col>
					</el-row>
					<br />
				</el-card>
			</el-col>
			<el-col :span="2">
				<el-card class="cursor" shadow="never" style="background-color: blueviolet;">选项</el-card>
				<br />
				<a @click="requirement"><el-card class="cursor" shadow="never">要求</el-card></a>
			</el-col>
			<el-col :span="16" style="height: 52.75rem;overflow: auto;">
        <el-tabs type="card" v-model="activeName" @tab-click="getFoodList">
          <el-tab-pane label="全部" name="0">
            <el-row :gutter="12">
              <el-col :span="6" v-for="item in foodList" :key="item.id">
                <a style="cursor: pointer;text-decoration: none;" @click="selelctFood(item)">
                  <div style="height: 100px;border: 0.0125rem solid lightgray;border-radius: 0.25rem;">
                    <el-row :gutter="3">
                      <el-col :span="14">
                        <img v-show="item.foodImg !==''"  style="width: 100%;height: 98px;" :src="item.foodImg" />
                        <img v-show="item.foodImg ===''"  style="width: 100%;height: 98px" src="../../../../assets/img/no-img1.png" />
                      </el-col>
                      <el-col :span="10">
                        <div style="padding-top: 1.25rem;">
                          <div class="cursor" style="color: #000000;">{{ item.foodName }}</div>
                          <br>
                          <div class="cursor" style="color: red;">￥{{ item.price }}元</div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </a>
                <br />
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane v-for="item in foodTypeList" :key="item.id" :label="item.classificationName" :name="item.id">
            <el-row :gutter="12">
              <el-col :span="6" v-for="items in foodList" :key="item.id">
                <a style="cursor: pointer;text-decoration: none;" @click="selelctFood(items)">
                  <div style="height: 100px;border: 0.0125rem solid lightgray;border-radius: 0.25rem;">
                    <el-row :gutter="3">
                      <el-col :span="14">
                        <img v-show="items.foodImg !==''"  style="width: 100%;height: 98px;" :src="items.foodImg" />
                        <img v-show="items.foodImg ===''"  style="width: 100%;height:98px" src="../../../../assets/img/no-img1.png" />
                      </el-col>
                      <el-col :span="10">
                        <div style="padding-top: 1.25rem;">
                          <div class="cursor" style="color: #000000;">{{ items.foodName }}</div>
                          <br>
                          <div class="cursor" style="color: red;">￥{{ items.price }}元</div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </a>
                <br />
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
			</el-col>
		</el-row>

		<!-- 要求 -->
		<el-dialog title="要求" :visible.sync="requirementVisible" append-to-body :close-on-click-modal="false" width="40%" center>
			<el-checkbox-group v-model="requirementIdList">
				<el-checkbox border size="medium" v-for="f in requirementList" :key="f.requirementId" :label="f.requirementId">{{ f.requirementName }}</el-checkbox>
			</el-checkbox-group>
			<br />
			<el-input v-model="customRequirement" placeholder="自定义要求"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="requirementVisible = false">取消</el-button>
				<el-button type="primary" @click="getRequirements()">确定</el-button>
			</span>
		</el-dialog>
		</el-dialog>
	</div>
</template>

<script>
import EnglishKeyBord from '../../../reception/component/EnglishKeyBord';
export default {
	components:{
    EnglishKeyBord
	},

	data() {
		return {
      EnglishKeyBordVisle:false,
			FastfoodListVisible:false,
			PayComponentVisible:false,
			foodTypeList: [],
			foodList: [],
			activeName: 0,
			selectFoodList: [],
			foodIdList: [],
			totalMoney: 0,
			num: 0,
			index: 0,
			idArray: [],
			openDeskInfo: '',
			requirementVisible: false,
			requirementList: [],
			requirementIdList: [],
			requireStyle: '',
			customRequirement: '',
			requireArray: [],
			selectFoodId: 0,
			requirementStr: '',
			giveFoodVisible: false,
			fastFoodNumberVisible:false,
			giveFoodReasonList: [],
			giveFoodReasonId: '',
			brandList:[],
			brandName:'',
			orderInfo:{},
			number:1,
			FoodVisible:false,
			shortCode:'',
      foodItemInfo:''
		};
	},
	created() {
		this.getFoodTypeList();
		//this.getFoodList(0, null);
	},

	methods: {
    //根据助词码获取菜品
    getFoodListByShortCode() {
      this.EnglishKeyBordVisle = true;
    },

    getLett(lett) {
      if (lett === 'close') {
        this.EnglishKeyBordVisle = false;
        this.shortCode = '';
        this.$http({
          url: this.$http.adornUrl('/store/tstorefood/getFoodListByShortCode'),
          method: 'get',
          params: this.$http.adornParams({
            shortCode: this.shortCode
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            if (data.page !== null) {
              this.foodList = data.page;
            } else {
              this.foodList = [];
            }
          } else {
            this.foodList = [];
          }
        });
      } else {
        this.shortCode = lett;
        this.$http({
          url: this.$http.adornUrl('/store/tstorefood/getFoodListByShortCode'),
          method: 'get',
          params: this.$http.adornParams({
            shortCode: this.shortCode
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            if (data.page !== null) {
              this.foodList = data.page;
            } else {
              this.foodList = [];
            }
          } else {
            this.foodList = [];
          }
        });
      }
    },


		jiezhang(){
			this.orderInfo.totalMoney = this.totalMoney*this.number
			this.orderInfo.foodVos = this.selectFoodList
			this.FoodVisible = false
			this.$emit("DataList",this.orderInfo)
		},


		//提交赠菜
		 submitGiveFood() {
			for (let i = 0; i < this.selectFoodList.length; i++) {
				if (this.selectFoodList[i].id === this.selectFoodId) {
					this.selectFoodList[i].giveFoodReasonId = this.giveFoodReasonId;
					this.selectFoodList[i].giveFoodStatus = 1;
					this.totalMoney = this.totalMoney - this.selectFoodList[i].price
				}
			}
			this.giveFoodVisible = false;
		},


		getRequirements() {
			var requireArr = [];
			for (let j = 0; j < this.requirementIdList.length; j++) {
				for (let i = 0; i < this.requirementList.length; i++) {
					if (this.requirementList[i].requirementId === this.requirementIdList[j]) {
						requireArr.push(this.requirementList[i].requirementName);
					}
				}
			}
      this.requireArray = requireArr;
			for (let k = 0; k < this.requireArray.length; k++) {
				this.requirementStr += this.requireArray[k] + ' ';
			}
			for (let i = 0; i < this.selectFoodList.length; i++) {
				if (this.selectFoodList[i].id === this.selectFoodId) {
					this.selectFoodList[i].requirementName = this.requirementStr + this.customRequirement;
				}
			}
			this.requirementVisible = false;
		},

		superRequirement(row, column, event) {
      this.foodItemInfo = row;
			this.requirementStr = '';
			this.customRequirement = '';
			this.requirementIdList = [];
			this.selectFoodId = row.id;
		},

		requirement() {
			if (this.foodItemInfo === '') {
				this.$message({
					message: '请选择菜品',
					type: 'danger',
					duration: 1500
				});
			} else {
				this.requirementVisible = true;
				this.$http({
					url: this.$http.adornUrl('/store/tstorerequirement/list'),
					method: 'get',
					params: this.$http.adornParams({})
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.requirementList = data.page.list;
					} else {
						this.requirementList = [];
					}
				});
			}
		},

		//清空
		clearSelectFood() {
			if (this.selectFoodList.length === 0) {
				this.$message({
					type: 'danger',
					message: '当前无选中菜品'
				});
			} else {
				this.$confirm('你确定要清空所选菜品吗,?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(() => {
						this.selectFoodList = [];
						this.idArray = [];
						this.num = 0;
						this.index = 0;
						this.totalMoney = 0;
						this.foodIdList = [];
						this.$message({
							type: 'success',
							message: '清除成功!'
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消清除'
						});
					});
			}
		},

		//添加菜品份数
		addFood(row) {
			row.foodNum++;
			row.total = Number(row.foodNum) * Number(row.price);
			this.totalMoney += row.price;
			this.selectFoodList.push(row);
			this.selectFoodList = Array.from(new Set(this.selectFoodList));
		},
		//移除菜品
		removeFood(row) {
			if (row.foodNum > 1) {
				row.foodNum--;
				row.total = Number(row.foodNum) * Number(row.price);
				this.totalMoney -= row.price;
				this.selectFoodList.push(row);
				this.selectFoodList = Array.from(new Set(this.selectFoodList));
			} else {
				var idNewArray = [];
				for (let s = 0; s < this.idArray.length; s++) {
					if (row.id !== this.idArray[s]) {
						idNewArray.push(this.idArray[s]);
					}
				}
				this.idArray = idNewArray;
				this.num--;
				this.totalMoney -= row.price;
				//TODO
				var newArr = [];
				for (let i = 0; i < this.selectFoodList.length; i++) {
					this.selectFoodList[i].index = i;
					newArr.push(this.selectFoodList[i]);
				}
				this.selectFoodList = newArr;
				this.selectFoodList.splice(row.index, 1);
			}
		},

		//选择菜品
		selelctFood(food) {
			food.foodSign = 1
			food.index = this.num;
			if (food.index === 0) {
				this.idArray.push(food.id);
				food.foodNum = 1;
				food.total = food.price;
				//数据索引
				food.index = this.num;
				this.num++;
				this.selectFoodList.push(food);
				this.selectFoodList = Array.from(new Set(this.selectFoodList));
				this.totalMoney += Number(food.price);
			} else {
				if (!this.idArray.includes(food.id)) {
					this.idArray.push(food.id);
					food.foodNum = 1;
					food.total = food.price;
					//数据索引
					food.index = this.num;
					this.num++;
					this.selectFoodList.push(food);
					this.selectFoodList = Array.from(new Set(this.selectFoodList));
					this.totalMoney += Number(food.price);
				}
			}
		},

		getFoodTypeList() {
			//获取菜品分类
			this.$http({
				url: this.$http.adornUrl('/store/tstorefoodtype/list'),
				method: 'get',
				params: this.$http.adornParams({
          page: 1,
          limit: 100,
          key:'',
        })
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.foodTypeList = data.page.list;
				} else {
					this.foodTypeList = [];
					this.totalPage = 0;
				}
			});
		},

		getFoodList(tab, event) {
			this.FoodVisible = true
			var typeId = null;
			if (tab === 0) {
				typeId = 0;
			} else {
				typeId = tab.name;
			}
			this.$http({
				url: this.$http.adornUrl('/store/tstorefood/listFoodShow'),
				method: 'get',
				params: this.$http.adornParams({
					page: 1,
					limit: 100,
					typeId: typeId,
          key:'',
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.foodList = data.page.list;
					this.totalPage = data.page.totalCount;
				} else {
					this.foodList = [];
					this.totalPage = 0;
				}
			});
		}
	}
};
</script>

<style>
.cursor {
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}
</style>
